<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-列表渲染-实例2-table</title>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th v-for="col in columns">{{col.title}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(emp,index) in employees">
            <td>{{index+1}}</td>
   <!--         <td v-for="val in emp">{{val}}</td>-->
            <td v-for="col in columns">
                 {{emp[col.field]}} <!-- // emp['name'] = emp.name-->
            </td>
        </tr>
        </tbody>


    </table>

</div>
</body>
<script src="../../lib/vue.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            employees: [
                {
                    name: 'LT',
                    age: 45
                }, {
                    name: 'M',
                    age: 67
                }
            ],
            columns:[
                {
                    field:'name',
                    title:'姓名'
                },
                {
                    field:'age',
                    title:'年龄'
                }

            ]
        }

    })
</script>
</html>